上一篇有講到，元素選擇器沒辦法讓相同的標籤進行不同的樣式，這時候就要靠類選擇器啦~！

類選擇器（Class Selectors）是前端切版最常使用到的選擇器，根據 HTML 元素的 class 屬性值來選擇特定的元素，其中 class 就有「類別」的含義。

類選擇器的主要優勢在於其高度的重用性——不同的元素可以使用相同的類名，這使得樣式的維護更加方便，也使 HTML 結構更具靈活性。

💠類選擇器-基本用法

<p class="text">我是 class 為 text 的 P 標籤</p>
<p class="orange-text">我是 class 為 orange-text 的 P 標籤</p>
<div class="text">我是 class 為 text 的 DIV 標籤</div>

• 新增 class 屬性：在 HTML 元素中新增 class 屬性，其值為你想設定的類名。

.text {
  background-color: lightblue;
  padding: 10px;
}

.orange-text {
  color: orange;
}

• CSS 設定：使用 . 來指定類選擇器。例如，如果類名是 text，則相應的 CSS 選擇器為 .text。

從上面的範例可以看到，儘管 <p class="text"> 和 <div class="text"> 是不同的 HTML 元素，但它們都使用了相同的類名 text，因此它們的樣式設定是一致的。

💠多個類別

一起試試：[CODEPEN]

同一個元素可以擁有多個類別，我們能夠在不同的元素上共享相同的樣式，同時添加特定的樣式。

以下面的紅綠燈樣式範例來說，紅燈、綠燈、黃燈會有相同的寬高、且都是圓形的，但就差在顏色不一樣，因此我們可以這樣寫：

<div class="light red"></div>
<div class="light yellow"></div>
<div class="light green"></div>

.light {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.red {
  background-color: #d71919;
}

.yellow {
  background-color: #ffe100;
}

.green {
  background-color: #05a005;
}

這樣的寫法可以讓樣式的管理更加靈活和高效，也不需要個別設置一堆基本樣式啦！

💠類別命名規則

class 的命名是有規範的，可遵循以下規則：

• 允許的字符：類名可以包含字母（a-z, A-Z）、數字（0-9）、底線 _ 和連字號 -。
  例如：main-header 或 section_1。

• 開頭字符限制：類名不能以數字開頭。
  例如：123header 是不合法的，應該使用 header123。

• 空格和大小寫：類名不能包含空格，並且區分大小寫。
  例如：myClass 和 myclass 被視為不同的類名。

• 描述性：類名應具有描述性，以提高程式碼的可讀性和可維護性。
  例如：side-menu 比 sm 更能表達意圖。

💠總結

• 不同的元素可以共用相同的類別，方便樣式的統一管理。
• 同一個元素可以擁有多個類別，以實現更精細的樣式控制。
• 類名應以字母開頭，並遵循描述性和可讀性的要求。

本文將同步更新至 Lala Code